<template>
  <div class="profile-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="header-text">
            <h1 class="page-title">个人中心</h1>
            <p class="page-subtitle">管理您的个人信息和账户设置</p>
          </div>
        </div>
        <div class="header-decoration">
          <div class="decoration-circle"></div>
          <div class="decoration-dots">
            <span v-for="i in 3" :key="i" class="dot"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="profile-content">
      <!-- 用户信息卡片 -->
      <div class="user-info-card">
        <div class="card-header">
          <div class="header-title">
            <el-icon><UserFilled /></el-icon>
            <span>基本信息</span>
          </div>
          <el-button type="primary" @click="editProfile" class="edit-btn">
            <el-icon><Edit /></el-icon>
            编辑资料
          </el-button>
        </div>

        <div class="user-info">
          <div class="avatar-section">
            <div class="avatar-wrapper">
              <el-avatar :size="100" :src="getAvatarUrl(userInfo.avatar)" class="user-avatar">
                <el-icon><UserFilled /></el-icon>
              </el-avatar>

            </div>
            <div class="user-basic">
              <h3 class="username">{{ userInfo.username || '未设置' }}</h3>
              <p class="user-role">{{ userInfo.role === 'admin' ? '管理员' : '普通用户' }}</p>
              <div class="user-status">
                <el-tag :type="userInfo.status === 'active' ? 'success' : 'danger'" size="small">
                  {{ userInfo.status === 'active' ? '正常' : '禁用' }}
                </el-tag>
              </div>
            </div>
          </div>

          <div class="info-section">
            <div class="info-grid">
              <div class="info-item">
                <div class="info-icon">
                  <el-icon><Message /></el-icon>
                </div>
                <div class="info-content">
                  <div class="info-label">邮箱地址</div>
                  <div class="info-value">{{ userInfo.email || '未设置' }}</div>
                </div>
              </div>

              <div class="info-item">
                <div class="info-icon">
                  <el-icon><Phone /></el-icon>
                </div>
                <div class="info-content">
                  <div class="info-label">手机号码</div>
                  <div class="info-value">{{ userInfo.phone || '未设置' }}</div>
                </div>
              </div>

              <div class="info-item" v-if="userInfo.real_name">
                <div class="info-icon">
                  <el-icon><UserFilled /></el-icon>
                </div>
                <div class="info-content">
                  <div class="info-label">真实姓名</div>
                  <div class="info-value">{{ userInfo.real_name }}</div>
                </div>
              </div>

              <div class="info-item">
                <div class="info-icon">
                  <el-icon><Calendar /></el-icon>
                </div>
                <div class="info-content">
                  <div class="info-label">注册时间</div>
                  <div class="info-value">{{ formatDate(userInfo.created_at) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 账户统计 -->
      <div class="stats-card">
        <div class="card-header">
          <div class="header-title">
            <el-icon><DataAnalysis /></el-icon>
            <span>账户统计</span>
          </div>
        </div>

        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-icon balance">
              <el-icon><Wallet /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">¥{{ formatBalance(userInfo.balance) }}</div>
              <div class="stat-label">账户余额</div>
            </div>
            <div class="stat-trend positive">
              <el-icon><TrendCharts /></el-icon>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon playtime">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ formatPlayTime(userInfo.play_time || 0) }}</div>
              <div class="stat-label">累计游玩时间</div>
            </div>
            <div class="stat-trend positive">
              <el-icon><TrendCharts /></el-icon>
            </div>
          </div>

          <div class="stat-item">
            <div class="stat-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ orderCount }}</div>
              <div class="stat-label">订单总数</div>
            </div>
            <div class="stat-trend positive">
              <el-icon><TrendCharts /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷操作 -->
      <div class="actions-card">
        <div class="card-header">
          <div class="header-title">
            <el-icon><Operation /></el-icon>
            <span>快捷操作</span>
          </div>
        </div>

        <div class="actions-grid">
          <div class="action-item" @click="goToBooking">
            <div class="action-icon booking">
              <el-icon><Plus /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">预订台球桌</div>
              <div class="action-desc">快速预订您喜欢的台球桌</div>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="action-item" @click="goToOrders">
            <div class="action-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">我的订单</div>
              <div class="action-desc">查看和管理您的订单</div>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="action-item" @click="goToRecharge">
            <div class="action-icon recharge">
              <el-icon><Wallet /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">账户充值</div>
              <div class="action-desc">为您的账户充值余额</div>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="action-item" @click="changePassword">
            <div class="action-icon password">
              <el-icon><Key /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">修改密码</div>
              <div class="action-desc">更改您的登录密码</div>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="action-item" @click="accountSettings">
            <div class="action-icon settings">
              <el-icon><Setting /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">账户设置</div>
              <div class="action-desc">管理隐私和通知设置</div>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="action-item logout" @click="logout">
            <div class="action-icon logout">
              <el-icon><SwitchButton /></el-icon>
            </div>
            <div class="action-content">
              <div class="action-title">退出登录</div>
              <div class="action-desc">安全退出当前账户</div>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑个人信息对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑个人信息"
      width="500px"
    >
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-input v-model="editForm.real_name" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveProfile" :loading="saving">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="400px"
    >
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input v-model="passwordForm.currentPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savePassword" :loading="saving">确认修改</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 账户设置对话框 -->
    <el-dialog
      v-model="settingsDialogVisible"
      title="账户设置"
      width="700px"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeTab" type="border-card">
        <!-- 隐私设置 -->
        <el-tab-pane label="隐私设置" name="privacy">
          <div class="settings-section">
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">显示在线状态</div>
                <div class="setting-desc">其他用户可以看到您的在线状态</div>
              </div>
              <el-switch v-model="settings.showOnlineStatus" />
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">允许好友邀请</div>
                <div class="setting-desc">允许其他用户向您发送好友邀请</div>
              </div>
              <el-switch v-model="settings.allowFriendInvites" />
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">显示游戏记录</div>
                <div class="setting-desc">在个人资料中显示游戏统计信息</div>
              </div>
              <el-switch v-model="settings.showGameStats" />
            </div>
          </div>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notifications">
          <div class="settings-section">
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">邮件通知</div>
                <div class="setting-desc">接收重要活动和优惠信息的邮件通知</div>
              </div>
              <el-switch v-model="settings.emailNotifications" />
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">短信通知</div>
                <div class="setting-desc">接收订单状态和重要提醒的短信通知</div>
              </div>
              <el-switch v-model="settings.smsNotifications" />
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">推送通知</div>
                <div class="setting-desc">接收浏览器推送通知</div>
              </div>
              <el-switch v-model="settings.pushNotifications" />
            </div>
          </div>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <div class="settings-section">
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">两步验证</div>
                <div class="setting-desc">为您的账户添加额外的安全保护</div>
              </div>
              <el-button type="primary" size="small" @click="setupTwoFactor">
                {{ settings.twoFactorEnabled ? '已启用' : '启用' }}
              </el-button>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">登录提醒</div>
                <div class="setting-desc">当有新设备登录时发送提醒</div>
              </div>
              <el-switch v-model="settings.loginAlerts" />
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-title">自动登出</div>
                <div class="setting-desc">长时间无操作时自动登出</div>
              </div>
              <el-select v-model="settings.autoLogoutTime" size="small" style="width: 120px;">
                <el-option label="30分钟" :value="30" />
                <el-option label="1小时" :value="60" />
                <el-option label="2小时" :value="120" />
                <el-option label="永不" :value="0" />
              </el-select>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="settingsDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSettings" :loading="saving">保存设置</el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import { useUserStore } from '../store/modules/user';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Document,
  Wallet,
  Key,
  Setting,
  SwitchButton,
  User,
  UserFilled,
  Edit,
  Message,
  Phone,
  Calendar,
  DataAnalysis,
  Timer,
  TrendCharts,
  Operation,
  ArrowRight
} from '@element-plus/icons-vue';
import {
  getUserInfo,
  updateUserInfo,
  changePassword
} from '../api/user';

export default {
  name: 'Profile',
  components: {
    Document,
    Wallet,
    Key,
    Setting,
    SwitchButton,
    User,
    UserFilled,
    Edit,
    Message,
    Phone,
    Calendar,
    DataAnalysis,
    Timer,
    TrendCharts,
    Operation,
    ArrowRight
  },
  setup() {
    const userStore = useUserStore();
    const router = useRouter();

    const editDialogVisible = ref(false);
    const passwordDialogVisible = ref(false);
    const settingsDialogVisible = ref(false);
    const saving = ref(false);
    const editFormRef = ref();
    const passwordFormRef = ref();
    const activeTab = ref('privacy');
    const userInfo = ref({});
    const loading = ref(false);

    // 获取用户信息
    const fetchUserInfo = async () => {
      try {
        loading.value = true;
        const response = await getUserInfo();
        if (response.success) {
          userInfo.value = response.data;
          // 更新store中的用户信息
          userStore.userInfo = response.data;
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        ElMessage.error('获取用户信息失败');
      } finally {
        loading.value = false;
      }
    };

    // 编辑表单
    const editForm = reactive({
      username: '',
      email: '',
      phone: '',
      real_name: ''
    });

    // 密码表单
    const passwordForm = reactive({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    });

    // 账户设置
    const settings = reactive({
      showOnlineStatus: true,
      allowFriendInvites: true,
      showGameStats: true,
      emailNotifications: true,
      smsNotifications: false,
      pushNotifications: true,
      twoFactorEnabled: false,
      loginAlerts: true,
      autoLogoutTime: 60
    });

    // 编辑表单验证规则
    const editRules = {
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ]
    };

    // 密码表单验证规则
    const passwordRules = {
      currentPassword: [
        { required: true, message: '请输入当前密码', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
        { pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/, message: '密码必须包含字母和数字', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== passwordForm.newPassword) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
      ]
    };

    // 订单数量
    const orderCount = computed(() => {
      const orders = JSON.parse(localStorage.getItem('bookingOrders') || '[]');
      return orders.filter(order => order.userId === userInfo.value.id).length;
    });

    // 格式化日期
    const formatDate = (dateStr) => {
      if (!dateStr) return '未知';
      return new Date(dateStr).toLocaleDateString('zh-CN');
    };

    // 格式化游玩时间
    const formatPlayTime = (minutes) => {
      if (minutes < 60) {
        return `${minutes}分钟`;
      }
      const hours = Math.floor(minutes / 60);
      const remainingMinutes = minutes % 60;
      return `${hours}小时${remainingMinutes}分钟`;
    };

    // 格式化余额
    const formatBalance = (balance) => {
      if (balance === null || balance === undefined) {
        return '0.00';
      }
      const numBalance = Number(balance);
      if (isNaN(numBalance)) {
        return '0.00';
      }
      return numBalance.toFixed(2);
    };

    // 获取头像URL
    const getAvatarUrl = (avatar) => {
      if (!avatar) return '';
      if (avatar.startsWith('http')) return avatar;
      return `http://localhost:3001${avatar}`;
    };

    // 编辑个人信息
    const editProfile = () => {
      editForm.username = userInfo.value.username;
      editForm.email = userInfo.value.email;
      editForm.phone = userInfo.value.phone;
      editForm.real_name = userInfo.value.real_name || '';
      editDialogVisible.value = true;
    };

    // 保存个人信息
    const saveProfile = async () => {
      try {
        await editFormRef.value.validate();
        saving.value = true;

        const updateData = {
          email: editForm.email,
          phone: editForm.phone,
          real_name: editForm.real_name
        };

        const response = await updateUserInfo(updateData);
        if (response.success) {
          userInfo.value = response.data;
          userStore.userInfo = response.data;
          ElMessage.success('个人信息更新成功');
          editDialogVisible.value = false;
        } else {
          ElMessage.error(response.message || '更新失败');
        }
      } catch (error) {
        console.error('更新失败:', error);
        ElMessage.error('更新失败');
      } finally {
        saving.value = false;
      }
    };

    // 修改密码
    const changePassword = () => {
      passwordForm.currentPassword = '';
      passwordForm.newPassword = '';
      passwordForm.confirmPassword = '';
      passwordDialogVisible.value = true;
    };

    // 保存密码
    const savePassword = async () => {
      try {
        await passwordFormRef.value.validate();
        saving.value = true;

        const passwordData = {
          currentPassword: passwordForm.currentPassword,
          newPassword: passwordForm.newPassword
        };

        const response = await changePassword(passwordData);
        if (response.success) {
          ElMessage.success('密码修改成功');
          passwordDialogVisible.value = false;
          // 清空表单
          passwordForm.currentPassword = '';
          passwordForm.newPassword = '';
          passwordForm.confirmPassword = '';
        } else {
          ElMessage.error(response.message || '密码修改失败');
        }
      } catch (error) {
        console.error('密码修改失败:', error);
        ElMessage.error('密码修改失败');
      } finally {
        saving.value = false;
      }
    };









    // 账户设置
    const accountSettings = () => {
      settingsDialogVisible.value = true;
    };

    // 保存设置
    const saveSettings = async () => {
      try {
        saving.value = true;
        // 简化处理，直接保存到本地
        ElMessage.success('设置保存成功');
        settingsDialogVisible.value = false;
      } catch (error) {
        console.error('设置保存失败:', error);
        ElMessage.error('设置保存失败');
      } finally {
        saving.value = false;
      }
    };

    // 设置两步验证
    const setupTwoFactor = () => {
      if (settings.twoFactorEnabled) {
        ElMessage.info('两步验证已启用');
      } else {
        ElMessage.info('两步验证设置功能开发中...');
      }
    };

    // 跳转到预订页面
    const goToBooking = () => {
      router.push('/booking');
    };

    // 跳转到订单页面
    const goToOrders = () => {
      router.push('/orders');
    };

    // 跳转到充值页面
    const goToRecharge = () => {
      router.push('/recharge');
    };

    // 退出登录
    const logout = async () => {
      try {
        await ElMessageBox.confirm('确认退出登录？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        });

        userStore.logout();
        router.push('/login');
        ElMessage.success('已退出登录');
      } catch (error) {
        // 用户取消
      }
    };

    onMounted(() => {
      // 检查登录状态
      const token = localStorage.getItem('token');
      if (!token) {
        router.push('/login');
        return;
      }

      // 获取用户信息
      fetchUserInfo();
    });

    return {
      userInfo,
      loading,
      editDialogVisible,
      passwordDialogVisible,
      settingsDialogVisible,
      saving,
      editFormRef,
      passwordFormRef,
      activeTab,
      editForm,
      passwordForm,
      settings,
      editRules,
      passwordRules,
      orderCount,
      // 方法
      formatDate,
      formatPlayTime,
      formatBalance,
      getAvatarUrl,
      fetchUserInfo,
      editProfile,
      saveProfile,
      changePassword,
      savePassword,
      accountSettings,
      saveSettings,
      setupTwoFactor,
      goToBooking,
      goToOrders,
      goToRecharge,
      logout
    };
  }
};
</script>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: #f8fafc;
  min-height: calc(100vh - 60px);
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 32px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  backdrop-filter: blur(10px);
}

.header-text .page-title {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-text .page-subtitle {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.header-decoration {
  display: flex;
  align-items: center;
  gap: 16px;
}

.decoration-circle {
  width: 120px;
  height: 120px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: relative;
}

.decoration-dots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.decoration-dots .dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
}

.decoration-dots .dot:nth-child(2) {
  animation-delay: 0.5s;
}

.decoration-dots .dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-8px); opacity: 1; }
}

.profile-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* 卡片通用样式 */
.user-info-card,
.stats-card,
.actions-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.user-info-card:hover,
.stats-card:hover,
.actions-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.header-title .el-icon {
  color: #667eea;
  font-size: 20px;
}

.edit-btn {
  border-radius: 12px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
}

/* 用户信息区域 */
.user-info {
    display: flex;
    gap: 100px;
    align-items: flex-start;
}

.avatar-section {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.avatar-wrapper {
  position: relative;
}

.user-avatar {
  border: 4px solid white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}



.user-basic {
  flex: 1;
}

.username {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
}

.user-role {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #64748b;
}

.user-status {
  margin-bottom: 16px;
}

.info-section {
  flex: 1;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  align-items: center;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.info-item:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
}

.info-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: #1e293b;
  font-weight: 600;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  position: relative;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.stat-icon.balance {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.stat-icon.playtime {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.stat-icon.orders {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.stat-trend {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.stat-trend.positive {
  background: #dcfce7;
  color: #166534;
}

/* 操作卡片 */
.actions-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  border-color: #667eea;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
}

.action-item.logout:hover {
  border-color: #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.action-icon.booking {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.action-icon.orders {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.action-icon.recharge {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.action-icon.password {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.action-icon.settings {
  background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
}

.action-icon.logout {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 14px;
  color: #64748b;
}

.action-arrow {
  color: #94a3b8;
  font-size: 16px;
  transition: all 0.3s ease;
}

.action-item:hover .action-arrow {
  color: #667eea;
  transform: translateX(4px);
}

.action-item.logout:hover .action-arrow {
  color: #ef4444;
}



.tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #64748b;
}

.tip-item:last-child {
  margin-bottom: 0;
}

.tip-item .el-icon {
  color: #667eea;
  font-size: 16px;
}

.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    padding: 16px;
  }

  .page-header {
    padding: 24px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .header-decoration {
    display: none;
  }

  .avatar-section {
    flex-direction: row;
    text-align: center;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .avatar-upload-container {
    flex-direction: column;
    gap: 16px;
  }

  .upload-arrow {
    transform: rotate(90deg);
  }
}

.user-info {
  display: flex;
  gap: 100px;
  align-items: flex-start;
}

.avatar-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.user-avatar {
  border: 3px solid #f0f0f0;
}

.info-section {
  flex: 1;
}

.info-row {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.info-row .label {
  width: 100px;
  color: #606266;
  font-weight: bold;
}

.info-row .value {
  color: #303133;
  font-size: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.balance {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

.stat-icon.playtime {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.stat-icon.orders {
  background: linear-gradient(135deg, #e6a23c, #ebb563);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  color: #909399;
  font-size: 14px;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.actions-grid .el-button {
  height: 50px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.actions-grid .el-button .el-icon {
  font-size: 18px;
}

/* 设置对话框样式 */
.settings-section {
  padding: 20px 0;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
}

.setting-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.setting-desc {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.4;
}






.preview-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.upload-placeholder {
  text-align: center;
  padding: 40px 20px;
}

.upload-icon-wrapper {
  margin-bottom: 20px;
}

.upload-icon {
  font-size: 64px;
  color: #d1d5db;
  transition: all 0.3s ease;
}

.upload-area:hover .upload-icon {
  color: #667eea;
  transform: scale(1.1);
}

.upload-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.upload-hint {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* 上传进度 */
.upload-progress {
  margin-top: 20px;
  text-align: center;
}

.progress-text {
  margin-top: 12px;
  font-size: 14px;
  color: #667eea;
  font-weight: 500;
}

/* 裁剪区域 */
.cropper-section {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  background: white;
}

.cropper-container {
  text-align: center;
}

.cropper-wrapper {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

/* Cropper.js 基础样式 */
.cropper-wrapper :deep(.cropper-container) {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: none;
  user-select: none;
}

.cropper-wrapper :deep(.cropper-container img) {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.cropper-wrapper :deep(.cropper-canvas),
.cropper-wrapper :deep(.cropper-crop-box),
.cropper-wrapper :deep(.cropper-drag-box),
.cropper-wrapper :deep(.cropper-modal),
.cropper-wrapper :deep(.cropper-wrap-box) {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrapper :deep(.cropper-wrap-box) {
  overflow: hidden;
}

.cropper-wrapper :deep(.cropper-drag-box) {
  background-color: #fff;
  opacity: 0;
}

.cropper-wrapper :deep(.cropper-modal) {
  background-color: #000;
  opacity: 0.5;
}

.cropper-wrapper :deep(.cropper-view-box) {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-wrapper :deep(.cropper-dashed) {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-wrapper :deep(.cropper-dashed.dashed-h) {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-wrapper :deep(.cropper-dashed.dashed-v) {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-wrapper :deep(.cropper-center) {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-wrapper :deep(.cropper-center::before),
.cropper-wrapper :deep(.cropper-center::after) {
  background-color: #eee;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-wrapper :deep(.cropper-center::before) {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-wrapper :deep(.cropper-center::after) {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-wrapper :deep(.cropper-face),
.cropper-wrapper :deep(.cropper-line),
.cropper-wrapper :deep(.cropper-point) {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-wrapper :deep(.cropper-face) {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-wrapper :deep(.cropper-line) {
  background-color: #39f;
}

.cropper-wrapper :deep(.cropper-line.line-e) {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-wrapper :deep(.cropper-line.line-n) {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-wrapper :deep(.cropper-line.line-w) {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-wrapper :deep(.cropper-line.line-s) {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-wrapper :deep(.cropper-point) {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-wrapper :deep(.cropper-point.point-e) {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-wrapper :deep(.cropper-point.point-n) {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-wrapper :deep(.cropper-point.point-w) {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-wrapper :deep(.cropper-point.point-s) {
  bottom: -3px;
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-wrapper :deep(.cropper-point.point-ne) {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-wrapper :deep(.cropper-point.point-nw) {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-wrapper :deep(.cropper-point.point-sw) {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-wrapper :deep(.cropper-point.point-se) {
  bottom: -3px;
  cursor: nwse-resize;
  right: -3px;
}

.cropper-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 上传提示 */
.upload-tips {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.tips-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 16px;
}

.tips-title .el-icon {
  color: #667eea;
  font-size: 18px;
}

.tips-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.tip-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.tip-icon.success {
  color: #10b981;
}

.tip-icon.warning {
  color: #f59e0b;
}

.tip-icon.info {
  color: #3b82f6;
}

.tip-icon.primary {
  color: #667eea;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    padding: 15px;
  }

  .profile-content {
    grid-template-columns: 1fr;
  }

  .user-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }

  .info-row {
    justify-content: center;
  }

  .avatar-dialog {
    width: 95% !important;
  }

  .tips-content {
    grid-template-columns: 1fr;
  }

  .cropper-wrapper {
    height: 250px;
  }
}
</style>
